<!--在线咨询评分弹窗-->
<template>
  <!--<div v-show="webchatDialogShow">-->
    <div class="webchat-grade" :class="webchatDialogShow ? 'layout-qua' : 'layin-qua'">
      <div class="web-grade-left">
        <h2>{{$t('intelligentQualityCheck.intelWebchatDetail')}}
        </h2>
        <div class="web-grade-left-con">
          <affix :label="$t('webchat.basicInfo')">
            <div class="call-detail">
              <WebChatBaseInfoDetails :info="currentItem"></WebChatBaseInfoDetails>
            </div>
          </affix>
          <affix :label="$t('qualityCheck.webchatMsgHistory')">
            <webChatView
              :showFirstWord="true"
              :chatInformationId ="this.currentItem._id"
              :qualityCheck="true"
              :qualityScore="true"
            >
            </webChatView>
          </affix>
          <affix :label="$t('business.businessInfo')">
            <div  class="business">
              <div v-if="businessShow.length ===0" >{{$t('qualityCheck.noBusinessInfo')}}</div>
              <div class="history-content" v-for="(item, index) in businessShow" :key="index">
                <div class="data">
                  <div style="float: left;">{{item.createUser}}<span class="pad-left">{{$t('business.createBusiness')}}</span></div>
                  <div style="float: right;"><span class="pad-right">{{$t('public.callStatus')}}</span>{{item.step}}</div>
                </div>
                <div class="clear"></div>
                <div v-for="(one, index) in item.data" :key="index" class="bus-info div-color">
                  <div v-if="one.name === $t('business.businessNumber')">
                    <span>{{one.name + $t('public.colon')}}</span><span>{{one.value}}</span>
                    <span @click="busShowDetail(item._id)" style="float: right;" class="span-color"><i class="icon iconfont font12 pad-right" :class="busDetailShow? 'icon-shouqi':'icon-zhankai1'"></i>{{busDetailShow?$t('qualityCheck.businessUp'):$t('qualityCheck.businessDown')}}</span>
                  </div>
                  <div v-else>
                    <span>{{one.name + $t('public.colon')}}</span>
                    <span class="break-all" v-if="typeof one.value === 'object'">
              <div v-for="(item1, index) in one.value" :key="index">
                <globalPopup :url="item1.url" :key="item1.url2"
                             @showBigImage="showBigImage"
                             :name="item1.name" :currObj="item1" :srcUrl="item1.url2" :imgObj="item.data"></globalPopup>
              </div>
        </span>
                    <span class="break-all" v-else v-html="one.value"></span>
                  </div>
                </div>
                <business class="business-dialog bus-info" :busId="busId" :showHistory="true" v-if="busDetailShow"  @event="businessEvent"></business>
              </div>
            </div>
          </affix>
        </div>
      </div>
      <div class="web-grade-right">
        <h2>{{$t('qualityCheck.grade2')}}
          <span class="close" v-show="webchatDialogShow" @click="closeWindow"><i class="el-icon-close"></i></span>
        </h2>
        <div class="web-grade-right-con">
          <div class="wrap_grade">
            <el-popover
              ref="popover4"
              placement="top"
              width="400"
              trigger="hover">
              <quality-assist :ruleRender="ruleRender"></quality-assist>
            </el-popover>
            <span v-popover:popover4 class="assist">{{$t('intelligentQualityCheck.intelQualiAssist')}}</span>
          </div>
          <el-row :gutter="10">
            <el-col :span="6" class="grade_ipt">
              <span class="qc_score">{{$t('intelligentQualityCheck.intelGradeNum')}}:</span>
            </el-col>
            <el-col :span="18">
              <el-input v-model.trim="data.qc_grade"></el-input>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="6" class="grade_are">
              <span>{{$t('intelligentQualityCheck.intelGradeDetail')}}:</span>
            </el-col>
            <el-col :span="18">
              <el-input v-model="data.comment" type="textarea"></el-input>
            </el-col>
          </el-row>
          <div style="margin:40px 0;text-align:center;">
            <el-button size="mini" @click="closeWindow">{{$t('public.cancel')}}</el-button>
            <el-button size="mini" @click.stop="saveGrade(currentItem, 'saveGrade')" v-if="passBtn" style="display: none">{{$t('intelligentQualityCheck.intelConfirm')}}</el-button>
            <el-button size="mini" @click.stop="nextGrade" v-if="passBtn">{{$t('qualityCheck.passNext')}}</el-button>
            <el-button size="mini" type="primary" @click="saveGrade(currentItem, 'saveGradeAnd')">{{saveBtnDescribe}}</el-button>
          </div>
        </div>
      </div>
      <div v-show="webchatDialogShow" class="mask-qua"></div>
    </div>
  <!--</div>-->
</template>
<script>
  import globalPopup from '@/components/ui-modules/affix/globalPopup.vue'
  import qualityAssist from './qualityAssist.vue'
  import {checkform} from '@/utils/validate'
  import { commitImg } from '@/utils/publicMethod.js'
  import {getCache} from '@/utils/m7Utils.js'
  import {getBusinessHistoryDataNew} from '@/utils/workflowUtils.js'
  import affix from '../../../ui-modules/affix/Affix.vue'
  import business from '@/components/public-modules/cust-tab-content/business/index.vue'
  import webChatView from '../../webchat/webChatView.vue'
  import WebChatBaseInfoDetails from '@/components/public-modules/webChatBaseInfoDetails/webchatBaseInfoDetail.vue'
  import bus from '@/store/eventBus'
  export default {
    name: 'QCWebchatGrade',
    data () {
      return {
        rules: [],
        data: {
          qc_grade: '',
          comment: ''
        },
        gradeObj: {
          grade: 0,
          COMMENT: '',
          obj: {}
        },
        COMMENT: '',
        busId: '',
        busDetailShow: false,
        configList: [],
        simpleForm: {},
        configListForm: {}
      }
    },
    props: {
      ruleRender: Array,
      refreshNum: Number,
      currentItem: Object,
      template: Object,
      currentItemWebchat: Object,
      currentGrade: Object,
      webchatDialogShow: {type: Boolean, default: false},
      reGrade: {type: Boolean, default: false}
    },
    components: {
      qualityAssist,
      webChatView,
      business,
      affix,
      globalPopup,
      WebChatBaseInfoDetails
    },
    computed: {
      saveBtnDescribe () {
        return this.reGrade ? this.$t('public.save') : this.$t('qualityCheck.saveAndNext')
      },
      passBtn () {
        return !this.reGrade
      },
      businessShow () {
        let data = this.currentItemWebchat && this.currentItemWebchat.busHistory || []
        let arr = []
        for (let i = 0; i < data.length; i++) {
          let busObj = {_id: data[i]._id}
          let item = data[i]
          busObj.lastUpdateUser = getCache('agents', item.lastUpdateUser).displayName
          busObj.createUser = getCache('agents', item.createUser).displayName
          busObj.step = getCache('businessFlowStep', item.step).name
          busObj.flow = getCache('businessFlow', item.flow).name
          busObj.data = getBusinessHistoryDataNew({excuteData: item.historyData, action: 'create'}, item)
          arr.push(busObj)
        }
        return arr
      }
    },
    methods: {
      showBigImage (item, obj) {
        commitImg(item, obj)
      },
      saveGrade (obj, upEvent) {
        let data = {
          _id: '',
          type: 'webchat',
          status: '',
          user: '',
          sName: '',
          account: '',
          createTime: ''
        }
        for (let i in data) {
          data[i] = obj[i] || ''
        }
        if (!checkform(this.data.qc_grade, 'Number2') && this.data.qc_grade) {
          if (parseFloat(this.data.qc_grade) > 100) {
            this.$message.error(this.$t('intelligentQualityCheck.intelGradeThanMax'))
            return
          }
          // 转一下怕影响
          data.grade_data = JSON.parse(JSON.stringify(this.data))
          data.grade_data.qc_grade = parseFloat(data.grade_data.qc_grade)
          this.$emit(upEvent, data)
          // 清空处理
          this.data.qc_grade = ''
          this.data.comment = ''
          console.log(data)
        } else {
          if (!this.data.qc_grade) {
            this.$message.error(this.$t('intelligentQualityCheck.intelNoGrade'))
            return
          }
          // callback(new Error(this.$t('qualityCheck.pleaseEnterRightNum')))
          this.$message.error(this.$t('intelligentQualityCheck.intelGradeShouldNum'))
        }
      },
      businessEvent (eventData) {
        let data = eventData.data
        this.busId = data._id
        if (eventData.event !== 'changeBusinessMaster') {
          this.$store.dispatch('getBusinessDetailById', {_id: this.busId})
        }
      },
      busShowDetail (id) {
        this.busDetailShow = !this.busDetailShow
        if (this.busDetailShow) {
          this.$store.dispatch('getBusinessDetailById', {_id: id}).then(() => {
            this.busId = id
          })
        }
      },
      fetchData () {
        this.gradeObj = {
          grade: 0,
          COMMENT: '',
          obj: {},
          type: ''
        }
        console.log(this.currentItem)
        this.COMMENT = ''
        this.configListForm = {}
        this.simpleForm = {}
      },
      nextGrade () {
        this.data.qc_grade = ''
        this.data.comment = ''
        this.$emit('nextGrade')
      },
      save (gradeObj) {
        this.data.qc_grade = ''
        this.data.comment = ''
        gradeObj.COMMENT = this.COMMENT
        this.$emit('saveGrade', gradeObj)
      },
      closeWindow () {
        this.busDetailShow = false
        this.data.qc_grade = ''
        this.data.comment = ''
        this.$emit('close')
      },
      saveBtn () {
        this.$refs.scoreTem.save()
      }
    },
    beforeMount () {
      this.fetchData()
    },
    watch: {
      refreshNum () {
        this.fetchData()
      }
    },
    mounted () {
      bus.$on('webchatScoreFetch', () => {
        this.fetchData()
      })
    },
    beforeDestroy () {
      bus.$off('webchatScoreFetch')
    }
  }
</script>
<style lang="stylus" scoped>
  .layout-qua
    transition transform 0.35s
    box-shadow 0 3px 6px rgba(0, 0, 0, .3)
    animation movelayout-qua1 .4s
    @keyframes movelayout-qua1
      0%
        width 0px
      100%
        width calc(84vw)
  .layin-qua
    width:0px
    transition transform 0.35s
  .webchat-grade.layin-qua .web-grade-right
    width 0px
  .webchat-grade.layout-qua .web-grade-right
    width 396px
  .webchat-grade.layin-qua .web-grade-left
    width 0px
  .webchat-grade.layout-qua .web-grade-left
    width calc(84vw - 396px)
  .webchat-grade
    position fixed
    right 0
    top 95px
    height calc(100% - 95px)
    z-index 6
    background-color #fff
    .web-grade-left
      float left
      position relative
      z-index 100
      /*width calc(100% - 396px)*/
    .web-grade-right
      float right
      position relative
      z-index 100
      background-color #f2f2f2
      .el-col-6
        width 100px
      .el-col-18
        width 258px
      /*width 396px*/
    .web-grade-left h2,.web-grade-right h2
      padding 14px 20px
      font-size 16px
      font-weight bold
      border-bottom 1px solid #ccc
    .web-grade-right h2
      border-left 1px solid #ccc
    .web-grade-left .web-grade-left-con,.web-grade-right .web-grade-right-con
      height calc(100vh - 185px)
      overflow-y auto
      overflow-x hidden
      padding 20px
    .web-grade-right .web-grade-right-con
      border-left 1px solid #ccc
    .mask-qua
      position fixed
      right 0
      left 0
      top 0
      bottom 0
      z-index 2
      background-color #fff
      /*filter Alpha(Opacity=60)*/
      opacity 0
  .close
    position absolute
    right 28px
    top 14px
    z-index 100
    font-size 16px
    /*background-color #f2f2f2*/
    cursor pointer
</style>
<style lang="stylus" scoped>
@import '../../../../assets/common.styl'
.business
  border 1px solid #ddd
  background-color #f9f9f9
  padding 5px
  .data
    line-height 34px
    font-size 14px
    border-bottom 1px dotted #ddd
    height 34px
  .bus-info
    padding-top 4px
  .pad-right
    padding-right 6px
  .pad-left
    padding-left 6px
.clearfix:after
  display block
.sq-wrap
  margin-bottom 16px
.pad
  padding 8px 15px 0 0
.el-row
  margin-bottom 10px
  .grade_are
    line-height 50px
  .grade_ipt
    line-height 30px
.wrap_grade
  height 14px
  line-height 14px
  margin-bottom 10px
  .qc_score
    margin-right 10px
  .assist
    float right
    color: $c-main
    cursor pointer
  .el-input
    width 100px
.call-detail table
  bors(1px,#ddd)
  width 100%
  border-collapse collapse
  tr
    height 40px
    border-bottom 1px solid #e7e7eb
    td:nth-of-type(even)
      padding 10px
      color $cf-gray3
    td:nth-of-type(odd)
      padding 10px
      color $cf-gray0
  &:nth-of-type(even)
    color $cf-gray0
  tr:nth-of-type(even) td
    background #f4f5f9
  tr:hover td
    background $c-back
.call-detail table tr:nth-last-child(1)
  border-bottom none
.div-color
  color $cf-level1
.span-color
  color: $c-main;
  cursor: pointer
</style>
